

<template>
  <dv-border-box-7  :color="['#084FA0','#06073B']" >
    <div class="container">
      <div class="title_container">
        <span  class="title"></span>
        <span style="margin-left: 10px;font-size: 22px"> 活动数据</span>
      </div>
      <div>
        <div class="active" ref="active" style="width: 100%; height: 300px"></div>
      </div>
    </div>
  </dv-border-box-7>
</template>
<script>
import * as echarts from 'echarts'
export default {
  data() {
    // 8:00-9:00  9:00-10:00 10:00-11:00  11:00-12:00  12:00-13:00  13:00-14:00  14:00-15:00 15:00-16:00 16:00-17:00
    return {
      // 定义横坐标数据
      xAxisData: [
        // '8点-9点', '9点-10点', '10点-11点', '11点-12点', '12点-13点', '13点-14点', '14点-15点', '15点-16点', '16点-17点',
        // '8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00',
        // '8点', '9点', '10点', '11点', '12点', '13点', '14点', '15点', '16点', '17点',

        // '8:00-9:00',  '9:00-10:00', '10:00-11:00',  '11:00-12:00', '12:00-13:00',  '13:00-14:00',  '14:00-15:00', '15:00-16:00', '16:00-17:00',
        //'8-9','9-10','10-11','11-12','12-13','13-14','14-15','15-16','16-17'

      ],
      // 定义纵坐标数据
      yAxisData: {
        // 前年: [72000, 84000, 60000, 30000, 30000, 90000, 90000, 54000, 30000],
        // 去年: [86400, 100800, 72000, 36000, 36000, 100800, 100800, 64800, 36000],
        // 今年: [64800, 75600, 54000, 27000, 27000, 81000, 81000, 48600, 27000],
          前年: [["2023-09-07 08:31:00",720], ["2023-09-07 09:31:00",840],  ["2023-09-07 10:31:00",600],  ["2023-09-07 11:31:00",300],  ["2023-09-07 12:31:00",300],  ["2023-09-07 13:31:00",900], ["2023-09-07 14:31:00",900], ["2023-09-07 15:31:00",540], ["2023-09-07 16:31:00",300]],
          去年: [["2023-09-07 08:31:00",864], ["2023-09-07 09:31:00",1008],  ["2023-09-07 10:31:00",720],  ["2023-09-07 11:31:00",360],  ["2023-09-07 12:31:00",360],  ["2023-09-07 13:31:00",1008], ["2023-09-07 14:31:00",1008], ["2023-09-07 15:31:00",648], ["2023-09-07 16:31:00",360]],
          今年: [["2023-09-07 08:31:00",648], ["2023-09-07 09:31:00", 756],  ["2023-09-07 10:31:00", 540],  ["2023-09-07 11:31:00",270],  ["2023-09-07 12:31:00",270],  ["2023-09-07 13:31:00", 810], ["2023-09-07 14:31:00",810], ["2023-09-07 15:31:00",486], ["2023-09-07 16:31:00",270]],
      },
      // 定义颜色
      colors: {
        前年: '#1CDBFE',
        去年: '#0DDE9C',
        今年: '#E4C431',
      },
      axisLineColor: '#4FA6F7',
      legendTextColor:'#4FA6F7'
    };
  },
  methods: {
    // 根据数值大小返回气泡的大小
    getSymbolSize(value) {
      if (value >= 900) {
        return 25; // 大气泡
      } else if (value >= 720) {
        return 20; // 中大气泡
      } else if (value >= 540) {
        return 15; // 中小气泡
      } else {
        return 10; // 小气泡
      }
    },
  },
  mounted() {
    // 创建 ECharts 实例并渲染气泡图
    const myChart = echarts.init(this.$refs.active);
    const seriesData = [];

    // 根据数据生成 series 数据
    for (const year in this.yAxisData) {
      seriesData.push({
        name: year,
        type: 'scatter',
        symbolSize: function (data) {
          const value = data[1];
          return this.getSymbolSize(value);
        }.bind(this),
        // data: this.xAxisData.map((item, index) => ([index, this.yAxisData[year][index]])),
        data:this.yAxisData[year],
        itemStyle: {
          color: this.colors[year],
        },

      });
    }

    const option = {

      tooltip: {
        trigger: 'axis',
        backgroundColor: '#040737',
        borderColor: '#0E8BFF', // 设置边框颜色，这里是绿色
        borderWidth: 2, // 设置边框宽度，这里是2像素
        textStyle: { // 设置文本样式
          color: '#ffffff', // 设置文本颜色
          fontSize: 16 // 设置文本字体大小
        },
        axisPointer: { // 禁用轴线
          type: 'none',
        },
        formatter: function (params) {
          console.log('222222',params)
          if(!params[0].value[1]) return
          let name1=params[0]?.seriesName
          let value1=params[0]?.data[1]
          let name2=params[1]?.seriesName
          let value2=params[1]?.data[1]
          let name3=params[2]?.seriesName
          let value3=params[2]?.data[1]
          const point = params[0];
          const dataIndex = point.data[0];
          let left= new Date(dataIndex).getHours()
          let  right=new Date(dataIndex).getHours()+1
          const timeRange = `${left}点-${right}点`;
          // let arr=this.xAxisData[dataIndex].split('-')
          //  const timeRange=`${this.xAxisData[dataIndex]}`
          // const timeRange=`${arr[0]}点-${arr[1]}点`
          return `<div>时间范围：${timeRange}</div>
                 <div><span style="display: inline-block;width: 9px;height: 9px;background: #1CDBFE;border-radius: 50%;"></span> <span>${name1}</span> :<span>${value1}</span></div>
                 <div><span style="display: inline-block;width: 9px;height: 9px;background: #0DDE9C;border-radius: 50%;"></span> <span>${name2}</span> :<span>${value2}</span></div>
                  <div><span style="display: inline-block;width: 9px;height: 9px;background: #E4C431;border-radius: 50%;"></span> <span>${name3}</span> :<span>${value3}</span></div>
`;
        }.bind(this),
      },
      xAxis: {
        type: 'time',
        min: "2023-09-07 07:00:00",
        max: "2023-09-07 18:00:00",

        nameGap: 10,
        scale: true,
        // data: this.xAxisData,
        axisLabel: {
          interval: 0, // 设置标签全部显示
          // rotate: 20, // 旋转角度，以适应较长的标签
          textStyle: {
            fontSize: 12, // 设置标签字体大小
          },
          formatter: function (value) {

            var date = new Date(value)
            var h = date.getHours() ;
            return h+'点'
             // let str=value.substring(0,value.length-2)
             // return`${value}点`
          }

        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show:false,
          lineStyle: {
            color: this.axisLineColor, // 设置X轴颜色
          },

        },
      },
      grid: {
        x: '12%',
        width: '78%',
        y: '12%',
        top: "25%",
        left: "13%",

      },
      yAxis: {
        type: 'value',
        name:'活动数',
        margin: 15, // 调整Y轴边距
        nameTextStyle:{//轴标题，在xAxis或yAxis根下
          color:'#4FA6F7',
          padding: [0,50,0,0],
          fontSize:12
        },
        splitLine: { show: false },
        axisLine: {
          lineStyle: {
            color: this.axisLineColor, // 设置Y轴颜色
          },
        },
      },
      legend: {
        data: Object.keys(this.yAxisData),
        orient: 'horizontal', // 图例横着排
        textStyle: {
          color: this.legendTextColor, // 设置图例字的颜色
        },
        padding: [30, 0, 0, 0],
        right: 10, // 距离右边的距离
      },

      series: seriesData,
    };
    myChart.setOption(option);
  },
};
</script>
<style scoped lang="scss">
.dv-border-box-7{
  border-radius: 3px;
  position: relative;
  height: 310px;
  .container{
    padding: 10px;
    .title_container{
      position: absolute;
      color: #1CDBFE;
      left: 20px;
      top:20px;
      display: flex;
      align-items: center;
      .title{
        width: 15px;
        height: 28px;
        background: #1CDBFE;
        border-radius: 9px;
        display: inline-block;
      }
    }

  }
}
:deep(.dv-border-svg-container) {
  display: none;
}
</style>
